<template>
  <div class="setting-page">
    <PageHeader />
    <div class="page-body">
      <div class="page-container">
        <div class="container container-left col-lg-3">
          <div class="sidenav">
            <ul class="list-group" ref="listGroup">
              <li class="list-header">个人设置</li>
              <li class="list-item" data-field=0 :class="activeIndex === 0 ?'active' :''">
                <i class="iconfont icon-user"></i>
                <span>基础信息</span>
              </li>
              <li class="list-item" data-field=1 :class="activeIndex === 1 ?'active' :''">
                <i class="iconfont icon-picture"></i>
                <span>头像设置</span>
              </li>
              <li class="list-item" data-field=2 :class="activeIndex === 2 ?'active' :''">
                <i class="iconfont icon-renzheng-tianchong"></i>
                <span>实名认证</span>
              </li>
              <li class="list-item" data-field=3 :class="activeIndex === 3 ?'active' :''">
                <i class="iconfont icon-password"></i>
                <span>安全设置</span>
              </li>
              <li class="list-item" data-field=4 :class="activeIndex === 4 ?'active' :''">
                <i class="iconfont icon-mail"></i>
                <span>邮箱设置</span>
              </li>
              <li class="list-item" data-field=5 :class="activeIndex === 5 ?'active' :''">
                <i class="iconfont icon-ArrowCircleright2-24px"></i>
                <span>第三方登录</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="container container-right col-lg-8">
          <div class="basic-info" v-if="activeIndex === 0">
            <h2>基础信息</h2>
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-form-item label="昵称">
                <span>{{modelRef.data.username}}</span>
                <a-button type="link" class="change-btn">修改</a-button>
              </a-form-item>
              <a-form-item label="姓名" name="name" v-bind="validateInfos.name">
                <a-input v-model:value="modelRef.data.name"
                  @blur="validate('name', { trigger: 'blur' }).catch(() => {})" />
              </a-form-item>
              <a-form-item label="性别">
                <a-radio-group v-model:value="modelRef.data.sex">
                  <a-radio :value="1">
                    男
                  </a-radio>
                  <a-radio :value="2">
                    女
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="身份证号" name="idNumber" v-bind="validateInfos.idNumber">
                <a-input v-model:value="modelRef.data.idNumber"
                  @blur="validate('idNumber', { trigger: 'blur' }).catch(() => {})" />
              </a-form-item>
              <a-form-item label="手机号码">
                <span>{{String(modelRef.data.tel).replace(/(\d{3})\d{4}(\d{4})/,'$1****$2')}}</span>
                <span class="font-primary">(已绑定)</span>
              </a-form-item>
              <a-form-item label="城市">
                <a-cascader v-model:value="modelRef.data.city" :options="options.data" placeholder="Please select" />
              </a-form-item>
              <a-form-item label="公司">
                <a-input v-model:value="modelRef.data.company"
                  @blur="validate('company', { trigger: 'blur' }).catch(() => {})" />
              </a-form-item>
              <a-form-item label="职业">
                <a-input v-model:value="modelRef.data.job"
                  @blur="validate('job', { trigger: 'blur' }).catch(() => {})" />
              </a-form-item>
              <a-form-item label="头衔">
                <a-input v-model:value="modelRef.data.rank"
                  @blur="validate('rank', { trigger: 'blur' }).catch(() => {})" />
              </a-form-item>
              <a-form-item label="个人签名">
                <a-input v-model:value="modelRef.data.sign"
                  @blur="validate('sign', { trigger: 'blur' }).catch(() => {})" />
              </a-form-item>
              <a-form-item label="个人主页" v-bind="validateInfos.home">
                <a-input v-model:value="modelRef.data.home"
                  @blur="validate('home', { trigger: 'blur' }).catch(() => {})" />
              </a-form-item>
              <a-form-item label="微博" v-bind="validateInfos.weibo">
                <a-input v-model:value="modelRef.data.weibo"
                  @blur="validate('weibo', { trigger: 'blur' }).catch(() => {})" />
                <a-checkbox class="public-checkbox" v-model:checked="modelRef.data.weiboChecked">公开</a-checkbox>
              </a-form-item>
              <a-form-item label="微信">
                <a-input v-model:value="modelRef.data.weixin"
                  @blur="validate('weixin', { trigger: 'blur' }).catch(() => {})" />
                <a-checkbox class="public-checkbox" v-model:checked="modelRef.data.weixinChecked">公开</a-checkbox>
              </a-form-item>
              <a-form-item label="QQ" v-bind="validateInfos.qq">
                <a-input v-model:value="modelRef.data.qq" @blur="validate('qq', { trigger: 'blur' }).catch(() => {})" />
                <a-checkbox class="public-checkbox" v-model:checked="modelRef.data.qqChecked">公开</a-checkbox>
              </a-form-item>
              <a-form-item class="submit-btn-item">
                <a-button @click="onSubmit" class="submit-btn">
                  保存
                </a-button>
              </a-form-item>
            </a-form>
          </div>
          <div class="basic-info" v-if="activeIndex === 1">
            <h2>头像设置</h2>
          </div>
          <div class="basic-info" v-if="activeIndex === 2">
            <h2>实名认证</h2>
          </div>
          <div class="basic-info" v-if="activeIndex === 3">
            <h2>安全设置</h2>
          </div>
          <div class="basic-info" v-if="activeIndex === 4">
            <h2>邮箱设置</h2>
          </div>
          <div class="basic-info" v-if="activeIndex === 5">
            <h2>第三方登录</h2>
          </div>
        </div>
      </div>
    </div>
    <PageFooter />
  </div>
</template>

<script>
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
// import { quillEditor } from 'vue-quill-editor'
import PageHeader from '../PageHeader'
import PageFooter from '../PageFooter'
import { ref, reactive, toRaw, onMounted, getCurrentInstance } from 'vue'
import { useForm } from '@ant-design-vue/use'
import { UpdateUserInfo, getCurrentUser } from '../../api'
import { Router } from '../../router'
export default {
  components: {
    PageHeader, PageFooter
    //  quillEditor
  },
  inject: ['reload'],
  setup () {
    let user = reactive({
      data: {}
    })
    let activeIndex = ref(0)
    let modelRef = reactive({
      data: {
        name: '',
        sex: 1,
        idNumber: '',
        city: [],
        company: '',
        job: '',
        rank: '',
        sign: '',
        home: '',
        weibo: '',
        weixin: '',
        qq: '',
        weiboChecked: false,
        weixinChecked: false,
        qqChecked: false
      }
    })
    const instance = getCurrentInstance()
    console.log(instance)
    // 获取表单数据
    function getFormData () {
      getCurrentUser().then(res => {
        console.log(res)
        modelRef.data = res.data
      })
    }

    onMounted(async () => {
      fetch('./city.json').then(res => {
        return res.json()
      }).then(data => {
        console.log(data)
        options.data = data
      })
      getFormData()
      const ul = instance.refs.listGroup
      const lis = [...ul.childNodes].slice(1)
      lis.map(li => {
        li.addEventListener('click', (ev) => {
          instance.ctx.$nextTick(() => {
            let e = ev || window.event
            let tar = e.target || e.srcElement
            const _self = tar.tagName.toLowerCase() === 'li' ? tar : tar.parentNode
            activeIndex.value = _self.getAttribute('data-field') * 1
          })
        })
      })
    })
    let options = reactive({
      data: []
    })
    const rulesRef = reactive({
      name: [{
        min: 3,
        max: 7,
        message: 'Length should be 3 to 7',
        trigger: 'blur'
      }],
      idNumber: [
        { type: 'number', message: '请输入有效的身份证', transform: (value) => { return Number(value) }, trigger: 'blur' },
        { max: 18, min: 18, message: '长度必须为18位', trigger: 'blur' }
      ],
      home: [{ pattern: /^(http|https):.+/, trigger: 'blur', message: '必须以http/https开头的页面' }],
      weibo: [{ pattern: /^(http|https):.+/, trigger: 'blur', message: '必须以http/https开头的页面' }],
      qq: [
        { type: 'number', message: '请输入有效的qq号', transform: (value) => { return Number(value) }, trigger: 'blur' },
        { min: 5, max: 11, message: '长度为5到11位', trigger: 'blur' }
      ]
    })
    const { validate, validateInfos } = useForm(modelRef, rulesRef)
    const onSubmit = e => {
      e.preventDefault()
      validate()
        .then(async () => {
          console.log(toRaw(modelRef.data))
          const outputData = {
            ...toRaw(modelRef.data)
          }
          const res = await UpdateUserInfo(outputData)
          instance.ctx.$message.success('保存成功！')
          instance.ctx.reload()
          window.scrollTo(0, 0)
        })
        .catch(err => {
          console.log('error', err)
        })
    }
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      validate,
      validateInfos,
      modelRef,
      onSubmit,
      options,
      activeIndex
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-page {
  background-color: #f4f6f8;
  .page-body {
    margin: 30px auto;
    min-height: 400px;
    .page-container {
      display: flex;
      @media (max-width: 992px) {
        display: block;
      }
      .container {
        padding: 0px 10px 20px 10px;
      }
      .sidenav {
        background-color: #fff;
        padding: 20px 0 10px;
        .list-group {
          list-style: none;
          .list-header {
            color: #919191;
            margin: 0 0 15px 20px;
          }
          .list-item {
            padding: 10px 15px 10px 35px;
            cursor: pointer;
            .iconfont {
              margin-right: 5px;
            }
            &:hover {
              background-color: #f5f5f5;
            }
            &.active {
              color: #15c288 !important;
              border-left: 2px solid #15c288;
            }
          }
        }
      }
      .basic-info {
        background-color: #fff;
        padding: 20px 0 10px;
        h2 {
          font-size: 20px;
          color: #444;
          padding: 12px 20px;
        }
        .public-checkbox {
          @media (min-width: 578px) {
            position: absolute;
            width: 75px;
            padding-left: 10px;
          }
        }
        .change-btn {
          color: #666;
          &:hover {
            color: #15c288;
          }
        }
        .submit-btn-item {
          text-align: center;
          .submit-btn {
            background-color: #15c288;
            color: white;
          }
        }
      }
    }
  }
}
</style>
